<!--
    by: yuanbiao 2023年08月08日
    name: x-share-bar
    notes:
-->
<template>
  <div :class="[prefixCls]">
    <i v-for="(v,i) in itemsList" :key="i"
      :class="[`${prefixCls}__item`, 'xvu-iconfont', v.icon]"
      :style="styles"
      :title="v.title"
      @click="clickHandler(v)"
    ></i>
  </div>
</template>

<script>
import shareTools from './share'
const prefixCls = 'x-share-bar'
export default {
  name: 'x-share-bar',
  props: {
    items: {
      type: Array,
      default () {
        return []
      }
    },
    size: {
      type: [Number, String],
      default: 24
    },
  },
  data() {
    return {
      prefixCls: prefixCls,
      iconNameDict: {
        weixin: '微信',
        qq: 'QQ',
        sina: '新浪微博',
        qqzone: 'QQ空间',
        tieba: '百度贴吧',
        douban: '豆瓣',
        renren: '人人网',
        kaixin: '开心网',
      }
    }
  },
  computed: {
    itemsList () {
      let result = []
      let whiteList = ['weixin', 'qq', 'qqzone', 'sina', 'tieba', 'douban', 'renren', 'kaixin']
      this.items.forEach(v => {
        let value = v.value || ''
        if (whiteList.includes(value)) {
          result.push({value, title: `分享到${this.iconNameDict[value]}`, icon: `xvu-${value}-fill`, options: v})
        }
      })
      return result
    },
    styles () {
      return {
        fontSize: `${this.size}px`,
      }
    }
  },
  methods: {
    clickHandler (item) {
      if (item.value === 'weixin') {
        shareTools.shareToWx(item.options)
      } else if (item.value === 'qq') {
        shareTools.shareToQQ(item.options)
      } else if (item.value === 'qqzone') {
        shareTools.shareToQzone(item.options)
      } else if (item.value === 'sina') {
        shareTools.shareToSina(item.options)
      } else if (item.value === 'tieba') {
        shareTools.shareToTieba(item.options)
      } else if (item.value === 'douban') {
        shareTools.shareToDouban(item.options)
      } else if (item.value === 'renren') {
        shareTools.shareToRenren(item.options)
      } else if (item.value === 'kaixin') {
        shareTools.shareToKaixin(item.options)
      }
    },
  }
}
</script>
